<template>
  <div class="header-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="18" :lg="18">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          :router="true"
        >
          <el-menu-item index="/">博客</el-menu-item>
          <el-menu-item index="/my">我的</el-menu-item>
          <el-menu-item index="/message">留言</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6">
        <!-- 删除: <MusicPlayer /> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'HeaderComponent',
  components: {
  },
  data() {
    return {
      activeIndex: '/'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.header-container {
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px;
  background-color: #f9f9f9; /* 修改背景颜色为亮色 */
  color: #333333; /* 修改文字颜色为暗色 */
  line-height: 60px;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.el-menu-demo {
  border-bottom: none;
  background-color: #f9f9f9; /* 修改背景颜色为亮色 */
}

.el-menu-item {
  color: #333333; /* 修改文字颜色为暗色 */
}

.el-menu-item:hover {
  background-color: #e0e0e0; /* 修改悬停背景颜色 */
}

.music-player {
  position: relative;
  width: 90%; /* 设置宽度 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  background-color: #e0e0e0; /* 修改背景颜色为亮色 */
}
</style>